<template>
  <div class="max-of-target">
    <e-container class="search-area">
      <SearchInput searchText="Branch">
        <a-select
          v-model:value="branch"
          show-search
          option-filter-prop="label"
          option-label-prop="label"
          :get-popup-container="triggerNode => triggerNode.parentNode"
          @change="handleBranchChange">
          <a-select-option v-for="item in branchList" :key="item.id" :label="item.name">{{
            item.name
          }}</a-select-option>
        </a-select>
      </SearchInput>
    </e-container>
    <a-spin :spinning="loading" tip="Loading...">
      <div class="container">
        <a-col v-for="(item, index) in data" :key="index" class="container-item">
          <div class="input-item">
            <span class="input-text">{{ item.displayName }}</span>
            <e-input-number v-model:inputValue="item.clientNum" :isEdit="!item.isEdit" :isAddonShow="false" />
          </div>
          <span v-if="!item.isEdit && hasEditPermission" class="edit" @click="handleEdit(item, index)">
            <e-icon type="edit" color="#3c6cfe" font-size="18px" />
          </span>
          <span v-if="item.isEdit" class="save" @click="handleSave(item)">
            <e-icon type="save" color="#3c6cfe" font-size="18px" />
          </span>
          <span v-if="item.isEdit" class="return" @click="handleReturn(item)">
            <e-icon type="repeal" color="#818d9f" font-size="18px" />
          </span>
        </a-col>
      </div>
    </a-spin>
  </div>
</template>

<script setup>
import { ref, onMounted, inject, computed } from 'vue'
import { useStore } from 'vuex'
import sp from '@/api/salesPlan.js'
import { SAVED_SUCCESSFULLY } from '@/constants/message.js'
import EContainer from '@/components/EContainer.vue'
import EIcon from '@/components/EIcon.vue'
import EInputNumber from '@/components/EInputNumber.vue'
import SearchInput from '../../components/SearchInput.vue'
const store = useStore()
const { message } = inject('Feedback')
// 有编辑权限（销售总监和销售支持）
const hasEditPermission = computed(() => store.getters['user/isPrimaryCSO'] || store.getters['user/isSalesSupport'])
// BU
const branch = ref()
const branchList = ref([])
// 可编辑数据
const data = ref([])
const loading = ref(false)
/**
 * 修改Branch
 * @param val
 */
const handleBranchChange = val => {
  branch.value = val
  getMaxOfTargetList()
}
/**
 * 获取当前人管理Branch信息
 */
const getBranch = () => {
  sp.getBranch()
    .then(res => {
      if (res.code === 2000) {
        branchList.value = res.data
        branch.value = branchList.value[0].id
      }
    })
    .then(() => {
      getMaxOfTargetList()
    })
}
/**
 * 获取销售人员同时最大客户量
 */
const getMaxOfTargetList = () => {
  loading.value = true
  return sp
    .getMaxOfTargetList({
      branch: branch.value
    })
    .then(res => {
      if (res.code === 2000) {
        for (let i = 0; i < res.data.length; i++) {
          res.data[i].isEdit = false
        }
        data.value = res.data
      }
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 30)
    })
}
/**
 * 编辑
 * @param val
 * @param index
 */
const handleEdit = (val, index) => {
  getMaxOfTargetList().then(() => {
    data.value[index].isEdit = true
  })
}
/**
 * 保存
 * @param val
 */
const handleSave = val => {
  sp.setMaxOfTarget({
    salesID: val.salesID,
    clientNum: Number(val.clientNum)
  }).then(res => {
    if (res.code === 2000) {
      val.isEdit = false
      message.success(SAVED_SUCCESSFULLY)
    }
  })
}
/**
 * 取消
 * @param val
 */
const handleReturn = val => {
  val.isEdit = false
  getMaxOfTargetList()
}
/**
 * 初始化
 */
onMounted(() => {
  getBranch()
})
</script>

<style lang="less" scoped>
@import '@/assets/style/reset_form';

.container {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  .container-item {
    width: calc(25% - 15px);
    height: 105px;
    background-color: @white;
    border: 1px solid @border-color;
    border-radius: 4px;
    box-shadow: 0 1px 3px @shadow-color;
    margin-top: 20px;
    margin-right: 20px;
    padding-left: 24px;
    box-sizing: border-box;
    position: relative;
    .input-item {
      margin-top: 20px;
      .input-text {
        color: @text-black;
        font-size: 14px;
        margin-bottom: 6px;
        display: flex;
        justify-content: space-between;
      }
      :deep(.ant-input-number),
      :deep(.ant-input-number-input),
      :deep(.ant-input-number-disabled) {
        text-align: left;
        width: 15vw;
        font-weight: bold;
        color: @black-85p;
      }
    }
    .edit,
    .save {
      position: absolute;
      bottom: 30px;
      right: 24px;
      cursor: pointer;
    }
    .return {
      position: absolute;
      bottom: 30px;
      right: 60px;
      cursor: pointer;
    }
    &:nth-child(4n) {
      margin-right: 0;
    }
  }
}
</style>
<route lang="yaml">
name: Max Of Target
path: '/sales-settings/max-of-target'
meta:
  title: Max Of Target
  sort: 5
  roles: isPrimaryCSO, isSalesSupport
</route>
